import React, { Component } from 'react';
import { View, Text,StyleSheet} from 'react-native';
import { CheckBox,Label,Badge} from 'iftide';

export default class Basic4 extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View>
                <View>
                    <CheckBox
                        value = '协议勾选'
                        size = 'agreement'
                        onChange = {(checked,value) => alert(value+' - '+checked)}
                    >
                        <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
                          
                            <Text style={{fontWeight: 'bold', width: 270, color: '#666'}}
                                numberOfLines={15}
                                lineHeight={30}
                                fontSize={15}
                            >
                                本人已阅读并遵守
                                <Text style={{color: 'blue'}}>
                                    《服务平台协议》
                                    <Text style={{color: '#666'}}>
                                        、
                                        <Text style={{color: 'blue'}}>
                                            《系统确认函》
                                            <Text style={{color: '#666'}}>
                                                ，并确认申请信息准确
                                            </Text>
                                        </Text>
                                    </Text>
                                </Text>
                            </Text>
                        </View>
                    </CheckBox>
                </View>
                <View style={styles.listTopBottom}>
                <CheckBox
                    value = '复选框的value'
                    labelBefore = {true}
                    isChecked = {false}
                    size = 'normal'
                    onChange={(checked,value) => alert(value+' - '+checked)}
                    >
                    <View style={styles.wrap}>
                        <Label text={'服务商户'} color={'description'}/>
                        <Badge dotStyle={styles.dotStyle} backgroundColor={'red'} text={'共'} fontSize={13} defaultWidth={26}/>
                    </View>
                </CheckBox>
            </View>
            </View>
            
        );
    }
}

const styles = StyleSheet.create({
    listTopBottom: {
        flexDirection: 'column',
        height: 44,
        borderTopWidth: 1,
        borderTopColor: '#d8d8d8',
        borderBottomWidth: 1,
        borderBottomColor: '#D8D8D8',
        justifyContent: 'center',
    },
    listBottom: {
        flexDirection: 'column',
        height: 44,
        borderBottomWidth: 1,
        borderBottomColor: '#D8D8D8',
        justifyContent: 'center',
    },
    wrap:{
        flexDirection: 'row',
        alignItems:'center',
        height: 44,
    },
    dotStyle:{
        marginRight:8
    }
});